<template>
    <div class="home-container">
      <!--    <Skeleton v-if="showSkeleton"></Skeleton>-->
      <!-- <section v-else>
        <section class="common-container">
          <a-row :gutter="16">
            <a-col :span="24">
              <Image :src="`https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250314161015/20250314161015_67d3e4674a10c.jpg`" :alt="'这是图片描述'" ></Image>
  
            </a-col>
          </a-row>
        </section>
      </section> -->
  
      <section>
        <section class="women-shop-banner">
          <div class="banner-content" >
            <h1 class="banner-title">{{ big_title }}</h1>
            <a :href="`/classify/${homeConfigData?.big_image?.[0]?.url?.url}-${homeConfigData?.big_image?.[0]?.classify_id?.split('-')?.[1]}.html`"  title="WOMEN'S SHOP" style="color: #000;" target="_self">
              <a-button class="shop-now-btn" type="primary" shape="round" size="large">SHOP NOW</a-button>
            </a>
          </div>
        </section>
      </section>
  
      <section>
        <section class="common-container">
          <a-row :gutter="[24, 24]" class="overflow-row">
            <a-col :xs="12" :sm="8" :md="6" v-for="(item, index) in homeConfigData?.hot_recommend?.slice(0, 4)" :key="index">
              <div class="category-card">
                <a :href="`/classify/${item?.url?.url}-${item?.classify_id?.split('-')?.[1]}.html`"  :title="item?.title" style="color: #000;" target="_self">
                  <a-image :src="item?.image" :alt="item?.title"  :preview="false" />
                </a>
                <div class="category-title">{{ item?.title }}</div>
              </div>
            </a-col>
          </a-row>
        </section>
      </section>
  
      <section class="common-container footwear-section fade-in-section">
        <h2 class="section-title">FOOTWEAR & ACCESORIES</h2>
        <div class="scroll-container">
          <a-row :gutter="[16, 16]" class="nowrap-row">
            <a-col :xs="8" :sm="8" :md="3" v-for="(item, index) in homeConfigData?.three_image" :key="index">
              <a :href="`/classify/${item?.url?.url}-${item?.classify_id?.split('-')?.[1]}.html`"  :title="item?.title" style="color: #000;" target="_self">
                <div class="footwear-item">
                  <div class="footwear-image-wrapper">
                    <a-image :src="item?.image" :alt="item?.title" :preview="false" />
                  </div>
                  <div class="footwear-title">{{ item?.title }}</div>
                </div>
              </a>
            </a-col>
          </a-row>
        </div>
      </section>
  
      <section class="common-container fade-in-section">
        <a-row :gutter="[24, 24]" class="overflow-row">
          <a-col :xs="12" :sm="8" :md="6" v-for="(item, index) in categoryList?.slice(0, 4)" :key="index">
            <a :href="`/classify/${item?.url}-${item?.classify_id?.split('-')?.[1]}.html`"  :title="item?.title" style="color: #000;" target="_self">
              <div class="category-card" >
                <a-image :src="item?.image" :alt="item?.title" :preview="false" />
                <div class="category-title">{{ item?.title }}</div>
              </div>
            </a>
          </a-col>
        </a-row>
      </section>
      <!-- CookieConsent组件将在实际项目中添加 -->
    </div>
  </template>
  
  <script lang="ts" setup>
  import { onMounted, ref, getCurrentInstance, onUnmounted } from 'vue';
  import { useRouter } from 'vue-router';
  // 导入 a-image 组件
  import { Image as AImage } from 'ant-design-vue';
  // 导入SEO管理器
  import { createSeoManager } from '../../utils/seo';
  import type { SeoDataType } from '../../utils/seo';
  // CookieConsent组件将在实际项目中导入
  
  const router = useRouter();
  const { proxy } = getCurrentInstance() || { proxy: null };
  const big_image = ref('');
  const big_title = ref('');
  const categoryList = ref<any[]>([]);
  const homeConfigData = ref<any>({});
  let showSkeleton = ref(true);
  
  // 初始化SEO数据
  const initialSeoData: SeoDataType = {
    title: `New Women's Fashion - Latest Trends | Frsst`,
    description: `Explore the newest women's fashion at Frsst! Shop the latest trends in dresses, tops & more. Worldwide shipping available.`,
    keywords: `new arrivals, women's fashion, trendy clothing`,
    url: 'https://frsst.com/home/clothings.html',
    image: ''
  };
  
  // 创建SEO管理器
  const seoManager = createSeoManager(initialSeoData);
  
  // Intersection Observer 初始化
  let observer: IntersectionObserver;
  onMounted(() => {
    // 加载页面数据
    loadPageData();
  
    GetHomeConfig();
    GetHomeCategory();
  
    setTimeout(() => {
      showSkeleton.value = false;
    }, 1000);
  
    // 添加交叉观察器监听元素进入视口动画
    observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              // 元素进入视口时添加动画类
              entry.target.classList.add('is-visible');
            } else {
              // 元素离开视口时移除动画类
              entry.target.classList.remove('is-visible');
            }
          });
        },
        { threshold: 0.1 } // 触发条件：元素进入或离开视口 10%
    );
  
    // 监听所有需要动画的元素
    document.querySelectorAll('.fade-in-section').forEach((el) => observer.observe(el));
  });
  
  // 在组件卸载时移除事件监听
  onUnmounted(() => {
    observer.disconnect(); // 清理观察器
  });
  
  // 加载页面数据并设置SEO
  const loadPageData = async () => {
    try {
      // 使用SEO管理器加载页面数据
      const data = await seoManager.loadPageData('/home/data/index.json');
      
      if (data) {
        homeConfigData.value = data.homeConfig;
        if (data.homeConfig?.big_image && data.homeConfig.big_image.length > 0) {
          big_image.value = data.homeConfig.big_image[0].image;
          big_title.value = data.homeConfig.big_image[0].title;
        }
        categoryList.value = data.homeCategory;
      }
    } catch (error) {
      console.error('加载页面数据失败:', error);
    }
  };
  
  //首页分类上
  const GetHomeConfig = async () => {
    const homeConfig = (window as any).__INITIAL_INDEX__?.homeConfig;
    if (homeConfig) {
      homeConfigData.value = homeConfig;
      if (homeConfig.big_image && homeConfig.big_image.length > 0) {
        big_image.value = homeConfig.big_image[0].image;
        big_title.value = homeConfig.big_image[0].title;
      }
    }
  };
  
  //首页分类下
  const GetHomeCategory = async () => {
    const homeCategory = (window as any).__INITIAL_INDEX__?.homeCategory;
    if (homeCategory) {
      categoryList.value = homeCategory;
    }
  };
  
  // 初始加载
  GetHomeConfig();
  GetHomeCategory();
  </script>
  
  <style lang="scss" scoped>
  .home-container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: #F7F6F3;
  }
  
  /* 首图样式 */
  .women-shop-banner {
    position: relative;
    width: 100%;
    height: 650px;
    background-image: v-bind('`url("${big_image}")`');
    background-size: cover;
    background-position: center;
    margin-bottom: 40px;
    overflow: hidden;
  
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
    }
  
    .banner-content {
      position: absolute;
      bottom: 60px;
      left: 60px;
      z-index: 2;
  
      @media (max-width: 768px) {
        bottom: 40px;
        left: 40px;
      }
  
      @media (max-width: 576px) {
        bottom: 30px;
        left: 30px;
      }
    }
  
    .banner-title {
      font-size: 60px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 0px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  
      @media (max-width: 768px) {
        font-size: 36px;
      }
  
      @media (max-width: 576px) {
        font-size: 28px;
      }
    }
  
    .shop-now-btn {
      background-color: #fff;
      color: #333;
      border: none;
      font-weight: 500;
      padding: 10px 22px;
      font-size:12px;
      // 过度加黑色边框
      transition: all 0.3s ease-in-out;
  
      &:hover {
        background-color: #000;
        color: #fff;
        border: 1px solid #000;
      }
    }
  }
  
  
  .ant-card {
    margin-bottom: 16px;
  }
  
  .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .feature-list li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
  }
  
  .feature-list li::before {
    content: "✓";
    color: #52c41a;
    position: absolute;
    left: 0;
  }
  
  .ant-btn {
    margin-top: 16px;
  }
  
  .category-card {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 125%; /* 4:5 宽高比 */
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
  
    :deep(.ant-image) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  
    :deep(.ant-image-img) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .category-card:hover {
    opacity: 0.9;
  }
  
  .category-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
  
  @media (max-width: 768px) {
    .category-title {
      font-size: 20px;
    }
  }
  
  @media (max-width: 576px) {
    .category-title {
      font-size: 18px;
    }
  }
  
  
  /* FOOTWEAR & ACCESORIES */
  .footwear-section {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  
  .section-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 24px;
    text-align: left;
  }
  
  .footwear-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
  
    &:hover {
      opacity: 0.8;
    }
  }
  
  .footwear-image-wrapper {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f5f5f5;
  
    :deep(.ant-image) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  
    :deep(.ant-image-img) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .footwear-title {
    margin-top: 12px;
    font-size: 11px;
    text-align: center;
    font-weight: 700;
    &:hover {
      text-decoration: underline;
    }
  }
  
  @media (max-width: 768px) {
    .section-title {
      font-size: 20px;
    }
  
    .footwear-title {
      font-size: 12px;
    }
  }
  
  @media (max-width: 576px) {
    .section-title {
      font-size: 18px;
    }
  }
  
  /* 添加渐入动画效果 */
  .fade-in-section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
    visibility: hidden;
  }
  
  .fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
  
  .fade-in-section:nth-child(2) {
    transition-delay: 0.2s;
  }
  
  .fade-in-section:nth-child(3) {
    transition-delay: 0.4s;
  }
  
  .fade-in-section:nth-child(4) {
    transition-delay: 0.6s;
  }
  
  .fade-in-section:nth-child(5) {
    transition-delay: 0.8s;
  }
  
  /* 添加横向滚动容器样式 */
  .scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  
    &::-webkit-scrollbar {
      display: none; /* Chrome, Safari and Opera */
    }
  }
  
  .nowrap-row {
    flex-wrap: nowrap;
    min-width: max-content;
  }
  
  .overflow-row {
    @media (max-width: 768px) {
      margin: 0 -8px;
      overflow-x: auto;
      flex-wrap: nowrap;
      scrollbar-width: none;
      -ms-overflow-style: none;
  
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
  </style>
  